<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cainiao打印测试</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
</head>
<body>
    <div id="container" v-cloak>
      <el-input
        type="textarea"
        :rows="24"
        placeholder=""
        v-model="printHtml">
      </el-input>
      <el-radio v-model="radio" label="1">预览</el-radio>
      <el-radio v-model="radio" label="2">打印</el-radio>
      <el-select v-model="printer" placeholder="请选择打印机">
        <el-option
          v-for="item in printerList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="handlePrint">打印</el-button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
        <script type="module">
           import PrintHelp from './printHelp.js';
           new Vue({
             el: '#container',
             data:{
                radio: '1',
                printer: '',
                printerList: [],
                printHtml:JSON.stringify([
                                  {
                                      "documentID":"6F4EE535|1560404343007223429",
                                      "contents":[
                                          {
                                              "templateURL":"https://zhengoma.gitee.io/cainiaoprint/kuaididan.json",
                                              "signature":"ALIBABACAINIAOWANGLUO",
                                              "data":{
                                                  "shopName":"店铺名称未命名",
                                                  "buyerNick":"花田错",
                                                  "receiverName":"这个联系人可以有多长我试试看吧",
                                                  "receiverTel":"1360001111",
                                                  "createdTime":"2021-02-05 11:00",
                                                  "payTime":"2021-02-05 11:00",
                                                  "receiverPostCode":"310051",
                                                  "receiverAddress":"浙江省杭州市滨江区长河街道江虹小区",
                                                  "tidBarCode":"1560404343007223429",
                                                  "totalNums":1,
                                                  "totalFees":"￥0.01",
                                                  "totalDiscounts":"￥0.00",
                                                  "totalPosts":"￥0",
                                                  "ydIdBarCode":1234567890,
                                                  "tradeGift":"",
                                                  "buyerMemo":"",
                                                  "sellerMemo":"",
                                                  "remark":"",
                                                  "senderName":"PosseWang",
                                                  "senderTel":"19911112222",
                                                  "senderPhone":"",
                                                  "senderPostCode":"020111",
                                                  "senderAddress":"上海上海市浦东新区高杨北路888号",
                                                  "tids":"1560404343007223429",
                                                  "itemList":[
                                                      {
                                                          "num":1,
                                                          "price":"0.01",
                                                          "discountFee":"0.00",
                                                          "payment":"0.01",
                                                          "title":"测试宝贝勿拍biubiu",
                                                          "picUrl":"https://img.alicdn.com/bao/uploaded/i4/3846006565/O1CN01M99ZQt1yMonpZiThk_!!3846006565.jpg",
                                                          "skuPropsName":" ",
                                                          "outerIid":"1CN3J7W8V1",
                                                          "numIid":630072958667
                                                      }
                                                  ]
                                              }
                                          }
                                      ]
                                  }
                              ]),
             },
             mounted(){
               console.log('mounted');
                PrintHelp.doConnect(() => {
                    PrintHelp.getPrinterList(formatPrinterList => {
                        let printerList = formatPrinterList.map(item => {
                            return {
                                label: item,
                                value: item
                            }
                        });
                        let currentPrinter;
                        if (printerList.length > 0 && (!currentPrinter || !printerList.find(item => {
                            return item.value === currentPrinter
                        }))) {
                            currentPrinter = printerList[0].value;
                        }
                        this.printerList=printerList;
                        this.printer=currentPrinter;
                         
                    });
                }, () => {
                    console.log('安装失败')
                });
               
             },
             methods: {
               
                handlePrint() {
                  PrintHelp.getCMD("setPrinterConfig", {
                      printer: {
                          "name": this.printer,
                          "paperSize": {
                              "width": 210,
                              "height": 297
                          }
                      }
                  }, (pdata)=> {
                      //开始打印
                      let lastTask = true, firstTask = true;
                      let isPreview = this.radio=='1';
                      let kaididanData = {
                          "task":{
                              "taskID": PrintHelp.getUUID(16, 16),
                              "preview": isPreview,
                              "printer": this.printer,
                              "documents": JSON.parse(this.printHtml)
                          }
                      }
                      PrintHelp.getCMD("print", kaididanData, pdata=> {
                          this.$message({
                            message: pdata.msg,
                            type: 'success'
                          });
                          if (!isPreview) {
                              //并且用这里的数据进行发货
                              if (lastTask) {
                                   console.log('打印完成');
                                  
                              } else if (pdata.msg !=='TaskID 重复') {
                                  //self.printer(printQueue.nextData());
                              }
                          } else {
                              if (pdata.previewURL && firstTask) {
                                  let newWin = window.open();
                                  newWin.location.href = pdata.previewURL;
                              }
                          }
                      });
                  });
                },
             },
            
             watch:{
              
             }
           })
           console.log('after mounted');
        </script>
</body>
</html>